<template>
  <el-header>
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handle_select"
      mode="horizontal"
      ref="menu"
    >
      <el-menu-item
        v-for="item in items"
        :key="item.index"
        :index="item.index"
        >{{ item.name }}</el-menu-item
      >
    </el-menu>
  </el-header>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import router from "../router";

type Item = { name: string; index: string };
function new_item(name: string) {
  return { name, index: name };
}

export default defineComponent({
  name: "Header",
  setup: () => {
    const items: Ref<Item[]> = ref([
      { name: "主页", index: "mainpage" },
      { name: "新建会议", index: "new" },
      { name: "加入会议", index: "join" },
    ]);

    const handles = new Map();
    const menu: Ref<any> = ref(null);

    const handle_select = (selected: string) => {
      console.log(selected);
      router.push({ name: selected });
      // TODO
    };

    return { items, handle_select };
  },
});
</script>

<style>
</style>